<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <system-user :formData="formData" @success="handleSaveSuccess"></system-user>
    </el-dialog>
    <el-dialog :visible.sync="roleDialogVisible">
      <system-user-role :user="userData" :transfer="roles" @success="handleRoleDialogSuccess"></system-user-role>
    </el-dialog>
    <el-row>
      <el-col :span="3">
        <el-button type="text" @click="handleSave(undefined)">添加用户</el-button>
      </el-col>

    </el-row>
    <el-row>
      <el-table :data="page.list">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSave(scope.row)">修改</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="text" @click="handleRoleManage(scope.row)">角色管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination @current-change="loadTable" :current-page.sync="page.pageNumber" :page-size="page.pageSize" layout="prev, pager, next, jumper" :total="page.totalRow">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import User from './User'
import UserRole from './UserRole'
export default {
  name: 'UserIndex',
  components: { 'system-user': User, 'system-user-role': UserRole },
  data: function() {
    return {
      page: {},
      dialogVisible: false,
      roleDialogVisible: false,
      formData: {},
      userData: {},
      roles: {}
    }
  },
  methods: {
    loadTable: function(number) {
      let body =  {
        pageNumber: number,
        pageSize: 10
      }

      this.$api.getUserPage(body).then(res =>{
        this.page = res.data
      })
    },
    handleSave: function(data) {
      if (data) {
        this.formData = { username: data.username, password: undefined }
      } else {
        this.formData = { username: undefined, password: undefined }
      }
      this.dialogVisible = true
    },
    handleDelete: function(id) {
      this.$confirm('确定删除这个用户？', '删除用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$api.deleteUser(id).then(res =>{
          this.$message.success('删除成功')
          this.loadTable(1)
        })

      }).catch(() => { })
    },
    handleRoleManage: function(row) {

      this.$api.getSeeRoleList(row.id).then(res=>{
        this.roles = res.data
        this.userData = row
        this.roleDialogVisible = true
      })
    },
    handleSaveSuccess: function() {
      this.dialogVisible = false
      this.loadTable(1)
    },
    handleRoleDialogSuccess: function() {
      this.roleDialogVisible = false
    }
  },
  created: function() {
    this.loadTable(1)
  }
}
</script>

<style>

</style>
